<template>
  <transition name="van-slide-up">
    <div class="edit-addr-container"
         v-if="editInfo.show">
      <section class="adrM adrM-add">
        <div class="edit-address-header">
          <a href="javascript:;"
             class="btn-back"
             @click="closePop">
             <!-- TODO 返回按钮替换 -->
            <span class="icon-back"></span>
          </a>
          <span v-if="editInfo.type=='add'">添加新地址</span>
          <span v-else>编辑地址</span>
          <!-- 添加新地址/编辑地址 -->
        </div>

        <section class="edit-content">
          <div class="edit-wrap">
            <div class="clearfix auto-discern">
              <textarea name="auto_discern_address"
                        class="auto-discern-textarea"
                        :placeholder="dingguagua_dz_is_freight?'选择学习地址说明:部分课程同时提供线上、线下教学服务， 请您选择便于线下学习的省、市、区/县地址；':'请输入地址，以空格分割，例如：张三 138xxxxxxxx 浙江省杭州市余杭区 仓前街道  详细地址 邮政编码' "
                        v-model="discernTextarea"></textarea>
              <van-button class="auto-discern-btn" @click="discernBtn" block  color="#F30C23" plain hairline round type="primary">点击识别</van-button>
            </div>
          </div>
          <div class="edit-wrap">
            <!-- <div class="block-title">收件人信息</div> -->
            <ul class="add">
              <li class="clearfix">
                <label class="bdbox">
                  <span class="colorRed">*</span>
                  {{dingguagua_dz_is_freight? '姓名' :'收货人'}}
                </label>
                <input type="text"
                       name="name"
                       id="name"
                       :placeholder="dingguagua_dz_is_freight?'便于提供学习服务时的称呼':'请填写收货人的姓名'"
                       v-model.trim="editInfo.addrDetail.name"
                       class="right-input" />
              </li>
              <li class="clearfix">
                <label class="bdbox">
                  <span class="colorRed">*</span> 手机号码
                </label>
                <input type="tel"
                       name="mobile"
                       :placeholder="dingguagua_dz_is_freight?'便于通知学习服务时的手机号码':'请填写收货人的手机号码'"
                       v-model.trim="editInfo.addrDetail.mobile"
                       class="right-input" />
              </li>
              <li class="clearfix address-li" v-if="!hideAddress">
                <!-- <input type="hidden" class="isNeedAddress" value="{$is_select_psq}"> -->
                <label class="bdbox" style="margin-right: 15px">
                  <span class="colorRed"
                        v-if="editInfo.isNeedAddress=='1'">*</span>
                  {{dingguagua_dz_is_freight? '学习地址' :'收货地区'}}
                </label>
                <div class="address-icon" @click="clickShowMapPop"></div>
                <!-- TODO 小程序选择地址需要后期修改 -->
                <wx-picker mode="multiSelector" :range="multiArray" @columnchange="columnchange" :value="multiIndex" @change='pickchange'>
                  <div class='j-addrM-selectArea' :class="{selectArea: areaBtnTextEdit.length?false:selectArea}">
                    <span>{{ editInfo.areaBtnTextEdit.length ? editInfo.areaBtnTextEdit:'请选择收货地区'}}</span>
                  </div>
                </wx-picker>
                <!-- <a href="javascript:;"
                   class="j-addrM-selectArea"
                   :class="{selectArea:editInfo.areaBtnTextEdit.length?false:selectArea}"
                   @click="selectAddress"
                   v-text="editInfo.areaBtnTextEdit.length?editInfo.areaBtnTextEdit:areaBtnText"></a> -->
              </li>
              <li class="clearfix" v-if="!hideTown" v-show="!dingguagua_dz_is_freight">
                <label class="bdbox">
                  <span class="colorRed"
                        v-if="editInfo.isNeedTown=='1'">*</span>乡镇/街道
                </label>
                <a href="javascript:;"
                   class="j-addrM-selectArea"
                   :class="{selectArea:editInfo.areaBtnTextEditTown.length?false:selectAreaTown}"
                   @click="selectAddressTown"
                   v-text="editInfo.
                  areaBtnTextEditTown.length?editInfo.areaBtnTextEditTown:areaBtnTextTown"></a>
              </li>
              <li class="clearfix">
                <label class="bdbox">邮政编码</label>
                <input type="tel"
                       name="zip"
                       placeholder="请填写邮政编码"
                       v-model.trim="editInfo.addrDetail.zip"
                       class="right-input" />
              </li>
              <li class="clearfix textarea">
                <label class="bdbox">
                  <span class="colorRed">*</span> 详细地址
                </label>
                <textarea name="address"
                          class="addr-detail-textarea"
                          placeholder="请填写详细的地址"
                          v-model.trim="editInfo.addrDetail.address"></textarea>
              </li>
            </ul>
          </div>
        </section>

        <div class="bottom-btn">
          <!-- <a href="javascript:;"
             class="j-addrM-add red-gra-btn"
             v-if="editInfo.type=='add'"
             @click="clickAddr">保存并使用</a> -->
          <a href="javascript:;"
             class="j-addrM-add red-gra-btn"
             @click="clickAddr">保存</a>
        </div>
      </section>
      <!-- 遮罩层 -->
      <map-area :visible.sync="showAreaPop"
                @onSelect="handleConfirm"></map-area>

      <!-- 选择乡镇 -->
      <van-popup v-model="townShow"
                 v-if="townShow"
                 position="bottom"
                 :round="true"
                 :style="{ height: '30%' }">
        <ul class="townList">
          <li class="li">
            请选择乡镇/街道
          </li>
          <li class="li"
              v-for="item in townLists"
              :key="item.town_id"
              @click="getTownLists(item)">{{item.town_name}}</li>
        </ul>
      </van-popup>

      <!-- 地图选址弹窗 -->
      <van-popup class="map-pop" v-model="mapPopShow" position="top">
        <iframe class="map-iframe" id="mapPage" frameborder=0 :src='src'></iframe>
      </van-popup>
    </div>
  </transition>
</template>

<script>
import Vue from 'vue'
import mapArea from '@/components/mapArea'
import small from '@/smallapp/small'
import { Area, Popup } from 'vant'
import { getProvince, getCity, getArea } from '@/api/login'
// src/smallapp/qqmap-wx-jssdk.js
import QQMapWX from '@/smallapp/qqmap-wx-jssdk.js'
import Store from '@/utils/store'
Vue.use(Area)
Vue.use(Popup)
import {
  addAddress,
  discernAddress,
  getAddressIdInfo,
  editAddress,
  getAddressTown
} from '@/api/user/address.js'

export default Vue.extend({
  name: 'index',
  components: {
    mapArea
  },
  props: {
    editInfo: {
      type: Object,
      default: {
        isNeedAddress: 1,
        isNeedTown: 1,
        // 获取的县区下有没有乡镇
        isNeedTownMust: 1,
        type: 'add',
        show: true,
        areaBtnTextEdit: '', // 选择地址名字 默认为空
        areaBtnTextEditTown: '', // 乡镇名字 默认为空
        TextareaDel: false,
        addrDetail: {
          address_id: '',
          name: '',
          mobile: '',
          province: '',
          city: '',
          area: '',
          town: '',
          zip: '',
          address: '',
          latitude: '',
          longitude: ''
        }
      }
    },
    dingguagua_dz_is_freight: {
      type: [String, Number],
      default: 0
    }
  },
  data() {
    return {
      sid:'',
      multiArray: [], // 三维数组数据
      multiIndex: [0, 0, 0], // 默认的下标
      step: 0, // 默认显示请选择
      provinceList: [],
      provinceArr: [],
      currnetProvinceKey: '',
      cityArr: [],
      cityList: [],
      currnetCityKey: '',
      areaArr: [],
      areaList: [],
      currnetAreaKey: '',
      areaBtnTextEdit: '',
      isMiniprogram: process.env.isMiniprogram,
      townLists: [],
      // 快速识别
      discernTextarea: '',
      // 遮罩层默认关闭
      showAreaPop: false,
      // 乡镇选择列表默认关闭
      townShow: false,
      selectArea: 1,
      selectAreaTown: 1,
      areaCode: [], // 选择地址参数 默认为空
      areaCodeTown: '', // 乡镇参数 默认为空
      areaBtnText: '点击选择', // 默认文字
      areaBtnTextTown: '点击选择', // 默认文字
      mapPopShow: false,
      // selectLat: '', // 纬度
      // selectLng: '' // 经度
      src: ''
    }
  },
  mounted() {
    this.getProvinceFn()
    this.src = `https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=${small.wxCache('tencentMapKey')}&referer=myapp`
  },
  methods: {
    columnchange(e) {
      // console.log(e.detail) // {column: 2, value: 1}
      const column = e.detail.column // 当前改变的列
      const data = {
        multiIndex: JSON.parse(JSON.stringify(this.multiIndex)),
        multiArray: JSON.parse(JSON.stringify(this.multiArray))
      }
      data.multiIndex[column] = e.detail.value
      switch (e.detail.column) { // 此时的改变列数
        case 0:
          data.multiArray = [this.provinceArr, [], []]
          var currentProvinceKey = this.provinceList[e.detail.value].province_id
          this.getCityFn({ province_id: currentProvinceKey }) // 获取当前key下面的市级数据
          data.multiIndex[1] = 0 // 将市默认选择第一个
          data.multiIndex[2] = 0
          break
        case 1:
          data.multiArray = [this.provinceArr, this.cityArr, []]
          var currentCitykey = this.cityList[e.detail.value].city_id
          this.getAreaFn({ city_id: currentCitykey }) // 获取门店
          data.multiIndex[2] = 0 // 门店默认为第一个
          break
      }
      this.multiIndex = data.multiIndex
      this.multiArray = data.multiArray
    },
    pickchange(e) { // picker发送选择改变时候触发 通过e.detail.value获取携带的值
      // console.log(e.detail.value) //   [0,1,2]
      this.multiIndex = e.detail.value // 直接更新即可
      let areaName = ''
      let areaId = ''
      if (this.areaList[this.multiIndex[2]]) {
        areaName = this.areaList[this.multiIndex[2]].area_name || ''
        areaId = this.areaList[this.multiIndex[2]].area_id || ''
      }

      this.editInfo.areaBtnTextEdit = this.provinceList[this.multiIndex[0]].province_name + this.cityList[this.multiIndex[1]].city_name + areaName

      this.editInfo.addrDetail.province = this.provinceList[this.multiIndex[0]].province_id
      this.editInfo.addrDetail.city = this.cityList[this.multiIndex[1]].city_id
      this.editInfo.addrDetail.area = areaId
    },
    /**
       * 获取省份接口
       */
    getProvinceFn(data) {
      getProvince(data).then((res) => {
        if (res.status == 1) {
          const resp = res.data
          // resp.forEach(item => {
          //   item.text = item.province_name
          // })
          // const obj = { text: '选择省份' }
          // resp.unshift(obj)
          // this.provinceList = resp
          const provinceList = [...resp] // 放在一个数组里面
          const provinceArr = resp.map(item => item.province_name) // 获取数据里面的value值，就是只用数据的名称
          this.multiArray = [provinceArr, [], []] // 更新三维数组 更新后长这样 [['江苏省', '福建省'],[],[]]
          this.provinceList = provinceList // 省级原始数据
          this.provinceArr = provinceArr // 省级所有的名称
          const defaultCode = this.provinceList[0].province_id // 使用第一项当作参数获取市级数据
          if (defaultCode) {
            this.currnetProvinceKey = defaultCode // 保存在当前的省级key
            this.getCityFn({ province_id: defaultCode }) // 获取市级数据
          }
        } else {
          this.$Error(res.msg)
        }
      })
    },
    /**
       * 获取城市接口
       */
    getCityFn(data) {
      getCity(data).then((res) => {
        this.loading = false
        if (res.status == 1) {
          const resp = res.data
          // resp.forEach(item => {
          //   item.text = item.city_name
          // })
          // const obj = { text: '选择城市' }
          // resp.unshift(obj)
          // this.cityList = resp
          const cityArr = resp.map(item => item.city_name)
          const cityList = [...resp]
          this.multiArray = [this.provinceArr, cityArr, []], // 更新三维数组 更新后长这样 [['江苏省', '福建省'], ['徐州市'], []]
          this.cityList = cityList, // 保存下市级原始数据
          this.cityArr = cityArr // 市级所有的名称
          const defaultCode = this.cityList[0].city_id // 用第一个获取门店数据
          if (defaultCode) {
            this.currnetCityKey = defaultCode // 存下当前选择的城市key
            this.getAreaFn({ city_id: defaultCode }) // 获取门店数据
          }
        } else {
          this.$Error(res.msg)
        }
      })
    },
    /**
       * 获取地区接口
       */
    getAreaFn(data) {
      getArea(data).then((res) => {
        this.loadingArea = false
        if (res.status == 1) {
          const resp = res.data
          // resp.forEach(item => {
          //   item.text = item.area_name
          // })
          // const obj = { text: '选择区域' }
          // if (resp.length > 0) resp.unshift(obj)
          // this.areaList = resp
          const areaArr = resp.map(item => item.area_name)
          const areaList = [...resp]
          this.multiArray = [this.provinceArr, this.cityArr, areaArr], // 更新三维数组 更新后长这样 [['江苏省', '福建省'], ['徐州市'], []]
          this.areaList = areaList, // 保存下市级原始数据
          this.areaArr = areaArr // 市级所有的名称
          const defaultCode = this.areaList[0] ? this.areaList[0].area_id : undefined // 用第一个获取门店数据
          if (defaultCode) {
            this.currnetAreaKey = defaultCode // 存下当前选择的城市key
          }
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 快速识别
    discernBtn() {
      const data = {
        address_detail: this.discernTextarea
      }
      if (!data.address_detail) {
        this.$Error('请输入需要快速识别的地址')
        return
      }
      discernAddress(data).then((res) => {
        if (res.status == 1) {
          const resData = res.data
          // console.log(resData)
          if (resData.status == 1) {
            // const address_id = this.editInfo.address_id
            const province_name = resData.province_name ? resData.province_name : ''
            const city_name = resData.city_name ? resData.city_name : ''
            const area_name = resData.area_name ? resData.area_name : ''
            const town_name = resData.town_name ? resData.town_name : ''
            const province_id = resData.province_id ? resData.province_id : ''
            const city_id = resData.city_id ? resData.city_id : ''
            const area_id = resData.area_id ? resData.area_id : ''
            const town_id = resData.town_id ? resData.town_id : ''
            const name = resData.name ? resData.name : ''
            const mobile = resData.mobile ? resData.mobile : ''
            const address = resData.address ? resData.address : ''
            const zip = resData.zip ? resData.zip : ''
            this.editInfo.addrDetail.mobile = mobile
            this.editInfo.addrDetail.name = name
            this.editInfo.addrDetail.province = province_id
            this.editInfo.addrDetail.city = city_id
            this.editInfo.addrDetail.area = area_id
            this.editInfo.addrDetail.zip = zip
            this.editInfo.addrDetail.address =
              address
            // this.editInfo.addrDetail.address_id = address_id
            this.editInfo.areaBtnTextEdit =
              `${province_name
              }\xa0\xa0${
                city_name
              }\xa0\xa0${
                area_name}`
            this.areaCode = [
              province_id,
              city_id,
              area_id
            ]
            this.selectArea = false
            if (this.editInfo.isNeedTown == '1') {
              this.selectAreaTown = false
              this.editInfo.areaBtnTextEditTown = town_name
              this.areaCodeTown = this.editInfo.addrDetail.town = town_id
            } else {
              this.editInfo.addrDetail.address =
                `${town_name}\xa0\xa0${address}`
            }
          } else {
            this.$Error('对不起，识别失败')
          }
        } else {
          this.$Error(res.msg)
        }
      })
    },
    closePop() {
      this.editInfo.show = false
    },
    // 点击调用乡镇选择
    selectAddressTown() {
      if (this.editInfo.isNeedTownMust == 0) {
        return
      }
      if (!this.editInfo.areaBtnTextEdit) {
        this.$Error('请先选择收货地区')
        return
      }
      this.townShow = true
    },
    // 选择乡镇
    getTownLists(item) {
      // // console.log(item)
      this.editInfo.areaBtnTextEditTown = item.town_name
      this.areaCodeTown = this.editInfo.addrDetail.town =
        item.town_id
      this.townShow = false
    },
    // 点击调用地址选择
    selectAddress() {
      this.showAreaPop = true
    },
    // 根据地址获取省市区id
    getAddressIdInfoFn(address) {
      const data = {
        address_info: address
      }
      getAddressIdInfo(data).then((res) => {
        if (res.status == 1) {
          const resData = res.data
          const province_name = resData.province_name ? resData.province_name : ''
          const city_name = resData.city_name ? resData.city_name : ''
          const area_name = resData.area_name ? resData.area_name : ''
          const town_name = resData.town_name ? resData.town_name : ''
          const province_id = resData.province_id ? resData.province_id : ''
          const city_id = resData.city_id ? resData.city_id : ''
          const area_id = resData.area_id ? resData.area_id : ''
          const town_id = resData.town_id ? resData.town_id : ''
          const address = resData.address ? resData.address : ''
          this.editInfo.addrDetail.province = province_id
          this.editInfo.addrDetail.city = city_id
          this.editInfo.addrDetail.area = area_id
          this.areaCodeTown = this.editInfo.addrDetail.town = town_id
          this.editInfo.addrDetail.address =
              address
          this.editInfo.areaBtnTextEdit = `${province_name
          }\xa0\xa0${
            city_name
          }\xa0\xa0${
            area_name}`
          this.editInfo.areaBtnTextEditTown = town_name
          this.areaCode = [
            province_id,
            city_id,
            area_id
          ]
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 点击地图选址
    clickShowMapPop() {
      const that = this
      if (that.isMiniprogram) {
        wx.getSetting({
          success(res) {
            if (res.authSetting['scope.userLocation'] == false) { // 如果已拒绝授权，则打开设置页面
              wx.openSetting({
                success(res) {
                  // console.log(res, '123')
                }
              })
            } else {
              wx.chooseLocation({
                success(e) {
                  // console.log(e, '55555555')
                  // that.discernTextarea = e.address
                  that.editInfo.addrDetail.latitude = e.latitude
                  that.editInfo.addrDetail.longitude = e.longitude
                  that.getAddressIdInfoFn(e.address)
                },
                fail(t) { 
                  // console.log(t, 'error') 
                },
                complete(t) {}
              })
            }
          }
	      })
        return false
      }
      that.mapPopShow = true
      that.$nextTick(() => {
        window.addEventListener('message', (event) => {
          // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
          const loc = event.data
          if (loc && loc.module == 'locationPicker') { // 防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
            const address = loc.poiaddress
            that.editInfo.addrDetail.latitude = loc.latlng.lat
            that.editInfo.addrDetail.longitude = loc.latlng.lng
            that.getAddressIdInfoFn(address)
            that.mapPopShow = false
          }
        }, false)
      })
      return false
    },
    // 确认
    handleConfirm(val, noArea) {
      // noArea为1表示该市没有区
      if ((noArea == 1 && (!val.province_id || !val.city_id)) || noArea != 1 && (!val.province_id || !val.city_id || !val.area_id)) {
        this.$Error('请选择完整的省市县')
      } else {
        this.showAreaPop = false
        this.editInfo.areaBtnTextEdit = `${val.province_name} ${val.city_name} ${val.area_name}`
        this.editInfo.addrDetail.province = val.province_id
        this.editInfo.addrDetail.city = val.city_id
        this.editInfo.addrDetail.area = val.area_id
        this.editInfo.addrDetail.town = ''
        this.editInfo.addrDetail.address = ''

        // 直接选择省市区时清空原来的经纬度
        this.editInfo.addrDetail.latitude = null
        this.editInfo.addrDetail.longitude = null
      }
    },
    // 保存地址
    clickAddr() {
      const that = this
      this.areaCode = [
        this.editInfo.province,
        this.editInfo.city,
        this.editInfo.area
      ]
      // console.log(this.editInfo)
      if (!this.editInfo.addrDetail.name) {
        this.$Error('请填写收货人的姓名')
        return
      }
      if (!this.editInfo.addrDetail.mobile) {
        this.$Error('请填写收货人的手机号码')
        return
      }

      if (!(this.editInfo.addrDetail.province && this.editInfo.addrDetail.city) && this.editInfo.isNeedAddress == '1' && !this.editInfo.areaBtnTextEdit) {
        this.$Error('请选择收货地区')
        return
      }
      if (!this.dingguagua_dz_is_freight) {
        if (this.editInfo.isNeedTown == '1' && !this.editInfo.areaBtnTextEditTown) {
          this.$Error('请选择乡镇/街道')
          return
        }
      }
      if (!this.editInfo.addrDetail.address) {
        this.$Error('请填写详细的收获地址')
        return
      }


      // 开启了蜂鸟跑腿，获取输入地址的经纬度
      if (this.editInfo.isNeedLatLng == 1) {
        // const address = (this.editInfo.areaBtnTextEdit + this.editInfo.areaBtnTextEditTown + this.editInfo.addrDetail.address).replace(/\s+/g, '')
        // 逗号分隔防止获取经纬度解析不准确
        const address = (`${this.editInfo.areaBtnTextEdit},${this.editInfo.areaBtnTextEditTown}${this.editInfo.addrDetail.address}`).replace(/\s+/g, '')
        const qqmapsdk = new QQMapWX({
          key: small.wxCache('tencentMapKey') // 必填
        })
        qqmapsdk.geocoder({
          // 获取表单传入地址
          address, // 地址参数，例：固定地址，address: '北京市海淀区彩和坊路海淀西大街74号'
          success(res) { // 成功后的回调},
            // console.log(res.result)
            that.editInfo.addrDetail.latitude = res.result.location.lat
            that.editInfo.addrDetail.longitude = res.result.location.lng
            that.saveAddress()
          },
          fail(error) {
            // that.$Error('获取经纬度失败，请稍后再试')
            console.error(error);
            that.saveAddress()
          }
        })
      } else {
        that.saveAddress()
      }
    },
    // 请求保存地址接口
    saveAddress() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      const data = this.editInfo.addrDetail
      if (this.editInfo.type == 'add') {
        addAddress(data).then((res) => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            this.$Error('添加成功')
            this.editInfo.show = false
            this.$emit('init', 1)
          } else {
            this.$Error(res.msg)
          }
        })
      } else {
        editAddress(data).then((res) => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            this.$Error('添加成功')
            this.editInfo.show = false
            this.$emit('init', 1)
          } else {
            this.$Error(res.msg)
          }
        })
      }
    }
  },
  computed:{
    //隐藏收货地区
    hideAddress() { // 计算手续费
      if(this.sid=='8012023' && this.editInfo.isNeedAddress!='1'){
        return true;
      }else{
        return false;
      }
    },
    //隐藏街道
    hideTown() { // 计算手续费
      if(this.sid=='8012023' && this.editInfo.isNeedTown!='1'){
        return true;
      }else{
        return false;
      }
    },

  },
  watch: {
    // 编辑页面关闭清除数据
    'editInfo.show': {
      handler(val) {
        if (!val) {
          this.editInfo.addrDetail = {
            address_id: '',
            name: '',
            mobile: '',
            province: '',
            city: '',
            area: '',
            town: '',
            zip: '', // 邮政编码
            address: '',
            latitude: '',
            longitude: ''
          }
          this.editInfo.areaBtnTextEdit = ''
          this.editInfo.areaBtnTextEditTown = ''
          this.areaCode = []
          this.areaBtnText = '点击选择'
          this.areaBtnTextTown = '点击选择'
          this.selectArea = 1
          this.selectAreaTown = 1
          this.discernTextarea = ''
        }
      },
      deep: true
    },
    // 监听县区的变化
    'editInfo.addrDetail.area': {
      handler() {
        this.townLists = []
        const data = {
          city_id: this.editInfo.addrDetail.area
        }
        getAddressTown(data).then((res) => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            if (!res.data.length) {
              this.editInfo.isNeedTownMust = 0
              this.editInfo.areaBtnTextEditTown = '暂无数据'
              return
            }
            this.editInfo.isNeedTownMust = 1
            if ((this.editInfo.type == 'edit' && this.editInfo.firstIn) || this.editInfo.addrDetail.town) {
              this.editInfo.firstIn = false
            } else {
              this.editInfo.areaBtnTextEditTown = ''
            }
            this.townLists = res.data
          } else {
            this.$Error(res.msg)
          }
        })
      },
      deep: true
    }
  },
  created() {
    this.sid = small.globalData.shopId

    // console.log(this.editInfo.addrDetail)
    if (this.editInfo.type == 'edit') {
      this.editInfo.areaBtnText = this.editInfo.areaBtnTextEdit
    }
    if (this.editInfo.TextareaDel) {
      this.discernTextarea = ''
    }

    // if (this.editInfo.show) {
    //   this.showPop = this.editInfo.show
    // }
  }
})
</script>

<style lang="scss">
.townList {
  padding-top: 20px;
  .li {
    transition-duration: 0ms;
    transition-property: none;
    line-height: 88px;
    width: 100%;
    font-size: 32px;
    text-align: center;
    color: #333;
    border-bottom: 1px solid #f9f9f9;
  }
}
.areaList {
  width: 100%;
}
.selectArea,
.j-addrM-selectArea {
  color: #999;
  padding-left: 30px;
  font-size: 26px;
  line-height: 98px;
}
.edit-addr-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  z-index: 12;
  input,
  textarea {
    border: 0;
    outline: 0;
    resize: none;
  }
  /* &.van-popup{
			top:0;
			left:0;
			transform:initial;
			width:100%;
			height:100%;
			background:#f5f5f5;
		} */
  .edit-address-header {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    line-height: 94px;
    background: #fff;
    border-bottom: 2px solid #f5f5f5;
    text-align: center;
    .btn-back {
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      width: 80px;
      height: 94px;
      padding-top: 4px;
    }
    .icon-back{
      border: solid #666;
      border-width: 0 3px 3px 0;
      display: inline-block;
      padding: 8px;
      transform: rotate(135deg);
      -webkit-transform: rotate(135deg);
    }
    .icon-backg {
      font-size: 40px;
    }
    span {
      font-size: 32px;
    }
  }
  .edit-content {
    font-size: 26px;
    height: calc(100vh - 184px);
    overflow-y: auto;
    .edit-wrap {
      margin-bottom: 20px;
      background: #fff;
      padding: 0 30px;
    }
    .tips_mn {
      margin-top: 30px;
      margin-left: 30px;
      font-weight: bold;
      color: red;
      font-size: 28px;
    }
    .block-title {
      padding: 20px 0;
      border-bottom: 1px solid #f5f5f5;
    }
    .auto-discern {
      padding-bottom: 36px;
    }
    .auto-discern-textarea {
      display: block;
      width: 100%;
      height: 140px;
      padding: 20px 0;
      font-size: 26px;
      // color: #999;
    }
    .auto-discern-btn {
      width: 188px;
      height: 62px;
      font-size: 26px;
      margin: 0 auto;
    }
    li {
      border-bottom: 1px solid #f5f5f5;
      overflow: hidden;
      white-space: normal;
      label {
        display: block;
        float: left;
        width: 160px;
        line-height: 98px;
        font-weight: normal;
        text-align: right;
        font-size: 28px;
        color: #333;
      }
      .right-input {
        width: 500px;
        height: 97px;
        // padding: 30px 0;
        padding-left: 30px;
        // color: #999;
        font-size: 26px;
      }
      &.address-li{
        position:relative;
        .address-icon{
          position:absolute;
          right:0;
          top:10px;
          // width:30px;
          // height:38px;
          width:62px;
          height:76px;
          background:url("https://img.wifenxiao.com/h5-wfx/images/address_log.png") center no-repeat;
          background-size:30px auto;
        }
      }
    }
    .addr-detail-textarea {
      width: 500px;
      height: 180px;
      padding-left: 30px;
      padding-top: 30px;
      // color: #999;
      font-size: 26px;
    }
  }
  .bottom-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 98px;
    font-size: 32px;
    text-align: center;
    color: #fff;
    background: #fff;
    box-sizing: border-box;
    a {
      display: block;
      width: 700px;
      height: 76px;
      margin: 11px auto;
      line-height: 76px;
      border-radius: 76px;
    }
  }
}
//地图选址弹窗
.map-pop{
  width:100vw;
  height:100vh;
  .map-iframe{
    width:100%;
    height:100%;
  }
}
</style>
